<template>
	<view class="app">
		<view class="card column">
			<text class="tip">抵扣券</text>
			<text class="price">{{ (userInfo && userInfo.groupTicketBalanceValue) || 0 }}</text>
			<view @click="handleShow" class="button">转余额</view>
		</view>
		<view class="item b-b" :class="{ income: item.money > 0 }" v-for="(item, index) in list" :key="index">
			<view class="left column">
				<view class="tit clamp">{{ item.name }}</view>
				<view class="time">{{ item.createdTime }}</view>
			</view>
			<text v-if="item.changeAmount > 0" class="price">+</text>
			<text class="price">{{ item.changeAmount }}</text>
		</view>
		<tui-modal :show="modelShow" @cancel="modelShow = false" :custom="true" fadeIn>
			<view class="tui-modal-custom">
				<view class="">请输入转化的数量（{{ radio }}手续费）</view>
				<view class="tui-number-box tui-bold tui-attr-title">
					<view class="tui-attr-title">抵扣券</view>
					<tui-numberbox :max="(userInfo && userInfo.groupTicketBalanceValue) || 10000" :min="0" :value="submitValue" @change="change"></tui-numberbox>
				</view>

				<tui-button height="72rpx" :size="28" shape="circle" @click="handleConfirm">确认</tui-button>
			</view>
		</tui-modal>
		<tui-no-data imgUrl="/static/images/toast/img_nodata.png" v-if="!loading && !list.length">暂无抵扣券</tui-no-data>
		<view v-if="!loading && list.length" class="loading-more"><text class="loading-more-text">~~没有更多了~~</text></view>
		<Loading type="img" v-if="loading"></Loading>
	</view>
</template>

<script>
let typeMap = {};
import { logListPage, getUserInfo, groupTicketTransitionBalance, getParamValue } from '@/service/mine.js';
import { groupItemListByKey } from '@/service/upload.js';
import { mapState } from 'vuex';
export default {
	data() {
		return {
			params: {
				pageNum: 1,
				pageSize: 20
			},
			loading: true,
			list: [],
			submitValue: 0,
			modelShow: false,
			radio: 0
		};
	},
	computed: {
		...mapState(['userInfo'])
	},
	async onLoad() {
		await this.getGroupItemListByKey();
		this.getLog();
		getParamValue({ key: 'groupTicketTranBalanceRatio' }).then(v => {
			this.radio = `${v * 100}%`;
		});
	},
	onShow() {
		this.getUserInfo();
	},
	onPullDownRefresh() {
		this.params.pageNum = 1;
		this.getLog();
		setTimeout(v => {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onReachBottom() {
		this.getLog();
	},
	methods: {
		handleShow() {
			this.modelShow = true;
		},
		async handleConfirm() {
			if (this.submitValue > 0) {
				this.loading = true;
				try {
					await groupTicketTransitionBalance({ transitionValue: this.submitValue });
					this.modelShow = false;
					this.getUserInfo();
					this.params.pageNum = 1;
					this.getLog();
				} finally {
					this.loading = false;
				}
			} else {
				this.$msg('请输入转化数量');
			}
		},
		change({ value }) {
			this.submitValue = value;
		},
		async getUserInfo() {
			const resp = await getUserInfo();
			this.$store.commit('saveuserinfo', resp);
		},
		async getGroupItemListByKey() {
			const resp = await groupItemListByKey('accountChTy');
			resp[0].typeItems.forEach(v => {
				typeMap[v.itemCode] = v.itemName;
			});
		},
		async getLog() {
			try {
				this.loading = true;

				const resp = await logListPage({ ...this.params, accountType: 'groupTicket' });
				resp.data = resp.data.map(v => {
					v.name = typeMap[v.changeType];
					return v;
				});
				this.list = this.params.pageNum == 1 ? resp.data : [...this.list, ...resp.data];
				this.params.pageNum++;
			} finally {
				this.loading = false;
				//TODO handle the exception
			}
		}
	}
};
</script>

<style scoped lang="scss">
view {
	box-sizing: border-box;
}
.card {
	display: flex;
	flex-direction: column;
	width: 680rpx;
	height: 280rpx;
	margin: 0 auto;
	padding: 40rpx 30rpx;
	margin-bottom: 16rpx;
	background-image: url(~@/static/icons/wallet.png);
	background-size: 100% 100%;
	color: #fff;

	.tip {
		font-size: 28rpx;
		line-height: 40rpx;
	}
	.price {
		margin-top: 8rpx;
		font-size: 72rpx;
		line-height: 92rpx;
	}
	.button {
		align-self: flex-end;
		background-color: #ffffff;
		height: 60upx;
		display: flex;
		border-radius: 10upx;
		justify-content: center;
		align-items: center;
		color: #afaa16;
		width: 140upx;
	}
}
.item {
	border-radius: 16upx;
	display: flex;
	width: 710upx;
	margin: 10rpx auto 20upx;
	padding: 30rpx 50rpx 30rpx 24rpx;
	background-color: #fff;

	&:after {
		left: 30rpx;
		border-color: #e8e8e8;
	}
	.mix-icon {
		flex-shrink: 0;
		width: 72rpx;
		font-size: 52rpx;
		transform: translateY(-6rpx);
	}
	.icon-tixian1 {
		color: #fd6663;
	}
	.icon-zhangdanmingxi01 {
		color: #ff893a;
	}
	.icon-chongzhi {
		color: #39c585;
	}
	.left {
		margin-left: 20upx;
		flex: 1;
		overflow: hidden;
	}
	.tit {
		font-size: 34rpx;
		color: $primary;
		line-height: 1.4;
		margin-bottom: 6rpx;
	}
	.time {
		font-size: 30rpx;
		color: #999;
	}
	.price {
		margin-top: 20upx;
		font-size: 34rpx;
		color: $primary;
		font-weight: 700;
	}
	&.income {
		.price {
			color: #00c700;
		}
		.icon-zhangdanmingxi01 {
			color: #39c585;
		}
	}
}

.tui-modal-custom {
	text-align: center;
}

.tui-tips-img {
	width: 80rpx;
	height: 80rpx;
	margin-top: 20rpx;
}

.tui-modal-custom-text {
	font-size: 30rpx;
	color: #333;
	padding: 30rpx 0 50rpx;
}

.tui-prompt-title {
	padding-bottom: 20rpx;
	font-size: 34rpx;
}
.tui-modal-input {
	width: 80%;
	border-bottom: 1rpx solid #e6e6e6;
	margin: 30rpx auto 50rpx;
	padding-bottom: 20rpx;
	font-size: 32rpx;
}
.tui-number-box {
	display: flex;
	justify-content: space-between;
	margin: 30upx 0;
}
</style>
